<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>古代农业知识体系</title>
    <script src="./js/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            background: url('./背景图（关系展示）.png') no-repeat center/cover fixed;
            font-family: "Microsoft Yahei", sans-serif;
            position: relative;
            overflow-x: hidden;
        }

        body::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            z-index: -1;
        }

        #nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: rgba(255, 250, 240, 0.85);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            align-items: center;
            padding: 0 40px;
            backdrop-filter: blur(6px);
            border-bottom: 1px solid rgba(212, 180, 131, 0.5);
            justify-content: flex-end;
        }

        .nav-btn {
            padding: 12px 28px;
            border-radius: 6px;
            background: transparent;
            color: #4A4A4A;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(74, 74, 74, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 10px;
            backdrop-filter: blur(8px);
        }

        .nav-btn:hover {
            background: rgba(74, 74, 74, 0.1);
            color: #4A4A4A;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .nav-btn:active {
            transform: translateY(0);
            filter: brightness(0.9);
        }

        #chart {
            width: 100%;
            height: calc(100vh - 80px);
            margin-top: 80px;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
        }

        .tooltip {
            background: rgba(255, 255, 255, 0.9) !important;
            border-radius: 8px !important;
            padding: 10px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }
    </style>
</head>

<body>
    <div id="nav">
        <button class="nav-btn" onclick="window.location.href='../index.html'">主界面</button>
        <button class="nav-btn" onclick="window.location.href='../第一界面/1界面.html'">第一界面</button>
        <button class="nav-btn" onclick="window.location.href='../第三界面/人界面.html'">第三界面</button>
        <button class="nav-btn" onclick="window.location.href='./农学文化界面.html'">农学数据展示</button>
    </div>
    <div id="chart"></div>

    <script>
        const myChart = echarts.init(document.getElementById('chart'));

        const data = {
            name: "古代农业知识体系",
            value: 100,
            children: [
                {
                    name: "农政制度",
                    value: 80,
                    children: [
                        {
                            name: "重农政策",
                            value: 60,
                            children: [
                                { name: "历代帝王劝农诏令", value: 40 },
                                { name: "田赋制度", value: 40 }
                            ]
                        },
                        {
                            name: "荒政体系",
                            value: 60,
                            children: [
                                { name: "常平仓制度", value: 40 },
                                { name: "社仓义仓", value: 40 },
                                { name: "救荒本草", value: 40 }
                            ]
                        },
                        {
                            name: "农书编撰",
                            value: 60,
                            children: [
                                { name: "综合性农书", value: 40 },
                                { name: "专题农书", value: 40 }
                            ]
                        }
                    ]
                },
                {
                    name: "天时农事",
                    value: 80,
                    children: [
                        {
                            name: "天文历法",
                            value: 60,
                            children: [
                                { name: "二十四节气", value: 40 },
                                { name: "农事月令", value: 40 }
                            ]
                        },
                        {
                            name: "气象占候",
                            value: 60,
                            children: [
                                { name: "星象农谚", value: 40 },
                                { name: "云霞雷电", value: 40 },
                                { name: "物候观测", value: 40 }
                            ]
                        }
                    ]
                },
                {
                    name: "土地管理",
                    value: 80,
                    children: [
                        {
                            name: "土壤分类",
                            value: 60,
                            children: [
                                { name: "九州土性", value: 40 },
                                { name: "燥湿肥瘠", value: 40 }
                            ]
                        },
                        {
                            name: "耕作制度",
                            value: 60,
                            children: [
                                { name: "畎亩法", value: 40 },
                                { name: "代田法", value: 40 },
                                { name: "区田法", value: 40 }
                            ]
                        }
                    ]
                },
                {
                    name: "水利工程",
                    value: 80,
                    children: [
                        {
                            name: "水利理论",
                            value: 60,
                            children: [
                                { name: "治水策略", value: 40 },
                                { name: "水文测量", value: 40 }
                            ]
                        },
                        {
                            name: "水利实践",
                            value: 60,
                            children: [
                                {
                                    name: "大型工程",
                                    value: 40,
                                    children: [
                                        { name: "都江堰", value: 30 },
                                        { name: "郑国渠", value: 30 }
                                    ]
                                },
                                {
                                    name: "灌溉工具",
                                    value: 40,
                                    children: [
                                        { name: "翻车", value: 30 },
                                        { name: "筒车", value: 30 },
                                        { name: "桔槔", value: 30 }
                                    ]
                                },
                                {
                                    name: "农田体系",
                                    value: 40,
                                    children: [
                                        { name: "圩田", value: 30 },
                                        { name: "梯田", value: 30 }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        };

        const option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (params.name === "古代农业知识体系") {
                        return '';
                    }
                    return `<div class="tooltip">
                        <div style="font-weight:bold;margin-bottom:5px">${params.name}</div>
                    </div>`;
                }
            },
            series: [{
                type: 'tree',
                data: [data],
                layout: 'radial',
                symbol: 'emptyCircle',
                symbolSize: 8,
                initialTreeDepth: -1,
                lineStyle: {
                    color: '#4a6b8a',
                    width: 1.5,
                    curveness: 0.5,
                    opacity: 0.8
                },
                label: {
                    show: false
                },
                leaves: {
                    label: {
                        show: false
                    }
                },
                itemStyle: {
                    color: '#fff',
                    borderColor: '#4a6b8a',
                    borderWidth: 1.5
                },
                emphasis: {
                    itemStyle: {
                        borderWidth: 2
                    },
                    label: {
                        show: true
                    }
                },
                top: '25%',
                bottom: '25%',
                left: '25%',
                right: '25%',
                roam: true,
                zoom: 1.0,
                levels: [
                    {
                        r0: '0%',
                        r: '15%',
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#4a6b8a',
                            borderWidth: 1.5
                        },
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 14,
                            fontWeight: 'bold',
                            backgroundColor: '#fff',
                            padding: [8, 16],
                            borderRadius: 4,
                            color: '#333'
                        }
                    }
                ]
            }]
        };

        myChart.setOption(option);
        window.addEventListener('resize', () => myChart.resize());
    </script>
</body>

</html>